<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title></title>
        <link rel="stylesheet" href="element-plus/index.css">
        <script src="js/vue.global.js"></script>
        <script src="element-plus/index.full.js"></script>
    </head>
    <body>
        <div id="app">
            <el-card style="max-width: 500px;margin: 50px auto;">
                <el-form ref="registerForm" label-width="100px" :rules="rules" :model="form">

                <el-form-item label="用户名" prop="user">
                    <el-input v-model="form.user" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="psw">
                    <el-input v-model="form.psw" placeholder="请输入密码" type="password"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="repsw">
                    <el-input v-model="form.repsw" placeholder="请输入确认密码" type="password"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio value="1">男</el-radio>
                        <el-radio value="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="兴趣爱好" prop="hobby">
                    <el-checkbox-group v-model="form.hobby">
                        <el-checkbox value="阅读">阅读</el-checkbox>
                        <el-checkbox value="运动">运动</el-checkbox>
                        <el-checkbox value="唱歌">唱歌</el-checkbox>
                        <el-checkbox value="跑步">跑步</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="出生日期" prop="birth">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="form.birth" placeholder="选择日期"></el-date-picker>
                </el-form-item>

                <el-form-item label="城市" prop="city">
                    <el-select v-model="form.city" placeholder="请选择城市">
                        <el-option value="上海"></el-option>
                        <el-option value="北京"></el-option>
                        <el-option value="广州"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
					<el-button @click="post" type='primary'>注册</el-button>
					<el-button @click="resetForm">重置</el-button>
				</el-form-item>
            </el-form>
            </el-card>

        </div>
        <script>
            Vue.createApp({
                data() {
                    return {
                        form:{   //表单数据
                            user:"",
                            psw:"",
                            repsw:"",
                            email:"",
                            sex:"",
                            hobby:[],
                            birth:"",
                            city:""
                        },
                        rules:{    //表单验证规则
                            user:[  //用户名验证规则
                                {required:true,message:"请输入用户名",trigger:"blur"}
                            ],
                            psw:[
                                {required:true,message:"请输入密码",trigger:"blur"},
                                {min:6,message:"请输入至少6位密码",trigger:"blur"}
                            ],
                            repsw:[
                                {required:true,message:"请输入确认密码",trigger:"blur"},
                                {validator:this.confirmPsw,trigger:"blur"}
                            ],
                            email:[
                                {required:true,message:"请输入邮箱",trigger:"blur"},
                                {type:"email",message:"请输入正确的邮箱",trigger:"blur"}
                            ],
                            sex:[
                                {required:true,message:"请选择性别",trigger:"blur"}
                            ],
                            city:[
                                {required:true,message:"请选择城市",trigger:"blur"}
                            ],
                            birth:[
                                {required:true,message:"请选择出生日期",trigger:"blur"}
                            ],
                            hobby:[
                                {required:true,message:"请选择兴趣爱好",trigger:"change"}
                            ]
                        }
                    }
                },
                methods:{
                    post(){
                        this.$refs["registerForm"].validate(valid=>{
                            if(valid){
                                alert("校验通过，提交数据")
                            }else{
                                alert("未通过校验")
                            }
                        })
                    },
                    confirmPsw(rule,value,callback){
                        if(value===this.form.psw){
                            callback()
                        }else{
                            callback(new Error("两次密码不一致"))
                        }
                    },
                    resetForm(){
                        this.$refs["registerForm"].resetFields()
                    }
                }
            }).use(ElementPlus).mount('#app')
        </script>
    </body>
</html>